import React,{Component} from 'react'
import * as pub from '../../config/public'
import * as fetch from '../../config/fetch'
import $ from 'jquery'
class QuestionDetail extends Component {
	constructor(args) {
		super()
		this.state = {
			question:{},
			radio:[],
			checkbox:[],
			singleNum:0,
			multipleNum:0,
		}
			
	}
	componentWillMount() {
		fetch.questionDetail(this.props.params.id).then((data) => {
			let radio = [],
				checkbox = [];
			for (let x of data.titleList) {
				if (x.titleType === '1') {
					radio.push(x)
				} else {
					checkbox.push(x)
				}
			}
			this.setState({
				question: data.testpaperData,
				radio,
				checkbox,
				singleNum: radio.length,
				multipleNum: checkbox.length,
			}, () => {
				$('.radio-question').each(function(i) {
					let answer = pub.getAnswer(radio[i].answer);
					$(this).find("input[type='radio']").each((index, el) => {
						for (let x of answer) {
							if (x === index) {
								el.checked = true;
							}
						}
					})

				})

				$('.check-question').each(function(i) {
					let answer = pub.getAnswer(checkbox[i].answer);
					$(this).find("input[type='checkbox']").each((index, el) => {
						for (let x of answer) {
							if (x === index) {
								el.checked = true;
							}
						}
					})

				})
			})
		}, (response) => {
			pub.reject(response);
		})
	}
	render() {
		let question = this.state.question;
		return (
			<div className="container">
			   <div className="common-title">考题查看</div>
			   		
			   		<div className="row">
					
					   <div className="row bg-FFFFFF box-shadow mar-b-20">
					   	<ul className="que-details">
					   		<li><label><span>课程发布日期</span>{pub.formatTimestamp(question.createTime)}</label></li>
					   		<li><label><span>考试时间</span>{pub.formatTimestamp(question.examStartTime,'y-m-d')}--{pub.formatTimestamp(question.examEndTime,'y-m-d')}</label></li>
					   		<li><label><span>考题数量</span>{question.titleSum}</label></li>
					   		<li><label><span>考题总分</span>{question.testScores}</label></li>
					   	</ul>
					   </div>

					</div>
					<div className="row bg-FFFFFF box-shadow pad-l-20 pad-r-20">
						<h3 style={{borderBottom:'1px solid #dee6f4',padding:'10px'}} className="mar-b-20">课程考题</h3>
						{
							this.state.singleNum !== 0 ?
								<div className="topic radio-topic mar-b-20 ">
									<h3>单项选择题：</h3>
									{this.state.radio.map((item,index)=>{
										return(
									          <dl key={index} className="radio-question">
									          	<dt>{index+1}、{item.title}</dt>
									          	<dd><label><input type="radio" className="describeA" name={'radio' + index}/>A. {item.A}</label></dd>
									          	<dd><label><input type="radio" className="describeB" name={'radio' + index}/>B. {item.B}</label></dd>
									          	<dd><label><input type="radio" className="describeC" name={'radio' + index}/>C. {item.C}</label></dd>
									          	<dd><label><input type="radio" className="describeD" name={'radio' + index}/>D. {item.D}</label></dd>
									          </dl>
											)
									})}
								</div>
							:null
						}
						
						{
							this.state.multipleNum !== 0 ?
								<div className="topic check-topic ">
									<h3>多选选择题：</h3>
									{this.state.checkbox.map((item,index)=>{
										return(
									         <dl key={index} className="check-question">
									         	<dt>{index+1}、{item.title}</dt>
									         	<dd><label><input className="describeA" type="checkbox"/>A. {item.A}</label></dd>
									         	<dd><label><input className="describeB" type="checkbox"/>B. {item.B}</label></dd>
									         	<dd><label><input className="describeC" type="checkbox"/>C. {item.C}</label></dd>
									         	<dd><label><input className="describeD" type="checkbox"/>D. {item.D}</label></dd>
									         </dl>
											)
									})}
								</div>
							:null

						}
						
						{/*<div className="row submit-btn mar-b-20 mar-t-20 text-center">
							<a className="btn btn-blue">发布</a>
						</div>*/}
						<div className="row text-right">
	       				    <a onClick={()=>{window.history.back();}} className="back-list">返回综合考试管理&gt;</a>
	       				</div>
					</div>


			</div>

		)
	}

}
export default QuestionDetail

